<div class="layui-form" lay-filter="layadmin-myinvoice-typeinitineraryform">
    <script type="text/html" template>
        <input type="hidden" name="id" value="{{ d.params.id || '' }}" />
    </script>
    <script type="text/html" template>
        <input type="hidden" name="myInvoiceId" value="{{ d.params.myInvoiceId || '' }}" />
    </script>
    <script type="text/html" template lay-done="layui.data.sendParams(d.params)">

    </script>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label">单据类型</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input" style="width:773px !important">
                <script type="text/html" template>
                    <select name="billType" id="ID-select-myinvoice-typeinitinerary-billtype" disabled>
                        <option value="">不限</option>
                        <option value="1" {{= d.params.invoiceType=="1"?'selected':'' }}>电子发票（普通发票）</option>
                        <option value="2" {{= d.params.invoiceType=="2"?'selected':'' }}>电子发票（增值税专用发票）</option>
                        <option value="3" {{= d.params.invoiceType=="3"?'selected':'' }}>电子发票（航空运输电子客票行程单）</option>
                    </select>
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>发票号码</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="invoiceNumber" placeholder="请输入发票号码" autocomplete="off" class="layui-input" lay-affix="clear" lay-verify="required|number" value="{{ d.params.invoiceNumber || '' }}">
                </script>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>填开日期</label>
            <div class="layui-input-inline layui-input-wrap billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input type="text" name="issuedDate" id="ID-laydate-typeinitinerary-issuedDate" lay-verify="required|date" placeholder="请选择填开日期" autocomplete="off" class="layui-input" value="{{ d.params.issuedDate || '' }}">
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>旅客姓名</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="passengerName" placeholder="请输入旅客姓名" autocomplete="off" class="layui-input" lay-affix="clear" lay-verify="required" value="{{ d.params.passengerName || '' }}">
                </script>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>电子客票号</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="eticketNo" placeholder="请输入电子客票号" autocomplete="off" class="layui-input" lay-affix="clear" lay-verify="required" value="{{ d.params.eticketNo || '' }}">
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>销售网点代号</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="agentCode" placeholder="请输入销售网点代号" autocomplete="off" class="layui-input" lay-affix="clear" lay-verify="required" value="{{ d.params.agentCode || '' }}">
                </script>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>填开单位</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="issuedBy" placeholder="请输入填开单位" autocomplete="off" class="layui-input" lay-affix="clear" lay-verify="required" value="{{ d.params.issuedBy || '' }}">
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>购方名称</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="buyerName" placeholder="请输入购方名称" autocomplete="off" class="layui-input" lay-affix="clear" lay-verify="required" value="{{ d.params.buyerName || '' }}">
                </script>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>购方纳税人识别号</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="buyerId" placeholder="请输入购方纳税人识别号" autocomplete="off" class="layui-input" lay-affix="clear" lay-verify="required" value="{{ d.params.buyerId || '' }}">
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>票面价</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="number" lay-affix="number" name="fare" placeholder="" step="0.01" lay-precision="2" class="layui-input" lay-filter="calcAmount" lay-verify="required|number" value="{{ d.params.fare || '0.00' }}">
                </script>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>燃油附加费</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="number" lay-affix="number" name="fuelSurcharge" placeholder="" step="0.01" lay-precision="2" class="layui-input" lay-filter="calcAmount" lay-verify="required|number" value="{{ d.params.fuelSurcharge || '0.00' }}">
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>增值税税率</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="taxRate" placeholder="请输入增值税税率" autocomplete="off" class="layui-input" lay-affix="clear" lay-verify="required" value="{{ d.params.taxRate || '' }}">
                </script>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>增值税税额</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="number" lay-affix="number" name="tax" placeholder="" step="0.01" lay-precision="2" class="layui-input" lay-filter="calcAmount" lay-verify="required|number" value="{{ d.params.tax || '0.00' }}">
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>民航发展基金</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="number" lay-affix="number" name="civilAviationFund" placeholder="" step="0.01" lay-precision="2" class="layui-input" lay-filter="calcAmount" lay-verify="required|number" value="{{ d.params.civilAviationFund || '0.00' }}">
                </script>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>其它税费</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="number" lay-affix="number" name="otherTax" placeholder="" step="0.01" lay-precision="2" class="layui-input" lay-filter="calcAmount" lay-verify="required|number" value="{{ d.params.otherTax || '0.00' }}">
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>合计金额</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="number" lay-affix="number" name="total" readonly placeholder="" step="0.01" lay-precision="2" class="layui-input" lay-verify="required|number" value="{{ d.params.total || '0.00' }}">
                </script>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label">保险费</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="insurance" placeholder="请输入保险费" autocomplete="off" class="layui-input" lay-affix="clear" lay-verify="required" value="{{ d.params.insurance || '' }}">
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin-bottom:0 !important;">
        <div class="layui-inline">
            <label class="layui-form-label">航班明细</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="btnAdd" lay-on="add">
                    <i class="layui-icon layui-icon-add-1"></i> 添加明细
                </button>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <table class="layui-table" id="ID-table-myinvoice-typeinitineraryform">
                    <!--<colgroup>
                        <col width="300">
                    </colgroup>-->
                    <thead>
                        <tr>
                            <th><span style="color:red">*</span>出发</th>
                            <th><span style="color:red">*</span>到达</th>
                            <th><span style="color:red">*</span>承运人</th>
                            <th><span style="color:red">*</span>航班号</th>
                            <th><span style="color:red">*</span>座位等级</th>
                            <th><span style="color:red">*</span>乘机日期</th>
                            <th><span style="color:red">*</span>乘机时间</th>
                            <th>客票级别</th>
                            <th>免费行李</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!--初始时无任何行-->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="text-align:right;">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-primary layui-border" lay-on="cancel">取消</button>
            <button type="submit" class="layui-btn" lay-submit lay-filter="LAY-myinvoice-typeinitinerary-search">提交</button>
        </div>
    </div>
</div>

<script>
    var newRow = '<tr>' +
        '<td><input type="text" name="from" class="layui-input" placeholder="请输入出发" lay-verify="required"></td>' +
        '<td><input type="text" name="to" class="layui-input" placeholder="请输入到达" lay-verify="required"></td>' +
        '<td><input type="text" name="carrier" class="layui-input" placeholder="请输入承运人" lay-verify="required"></td>' +
        '<td><input type="text" name="flightNumber" class="layui-input" placeholder="请输入航班号" lay-verify="required"></td>' +
        '<td><input type="text" name="seatClass" class="layui-input" placeholder="请输入座位等级" lay-verify="required"></td>' +
        '<td><input type="text" name="flightDate" placeholder="请选择乘机日期" class="layui-input laydate-item-typeinitinerary-flightdate" lay-verify="required|date"></td>' +
        '<td><input type="text" name="flightTime" placeholder="请选择乘机时间" class="layui-input laydate-item-typeinitinerary-flighttime" lay-verify="required"></td>' +
        '<td><input type="text" name="fareBasis" class="layui-input" placeholder="请输入客票级别"></td>' +
        '<td><input type="text" name="freeBaggage" class="layui-input" placeholder="请输入免费行李"></td>' +
        '<td><button class="layui-btn layui-btn-sm layui-bg-red delete-row-btn"><i class="layui-icon layui-icon-delete"></i> 删除</button></td>' +
        '</tr>';

    // 定义一个 lay-done 对应的全局方法，以供动态模板执行
    layui.data.sendParams = function (params) {
        console.log(params) //得到传递过来的 id 参数（或其他参数）值

        // 通过得到的参数值，做一些你想做的事
        // 如果是编辑则依据项目明细数据初始化，如果是新增则插入一个空行
        let isUpdate = params.hasOwnProperty('id') && params.id > 0;
        if (isUpdate) {
            for (var i = 0; i < params.flightList.length; i++) {
                var updateRow = '<tr>' +
                    '<input type="hidden" name="flightInfo_id" value="' + params.flightList[i].id + '" />' +
                    '<td><input type="text" name="from" class="layui-input" placeholder="请输入出发" lay-verify="required" value="' + params.flightList[i].from + '"></td>' +
                    '<td><input type="text" name="to" class="layui-input" placeholder="请输入到达" lay-verify="required" value="' + params.flightList[i].to + '"></td>' +
                    '<td><input type="text" name="carrier" class="layui-input" placeholder="请输入承运人" lay-verify="required" value="' + params.flightList[i].carrier + '"></td>' +
                    '<td><input type="text" name="flightNumber" class="layui-input" placeholder="请输入航班号" lay-verify="required" value="' + params.flightList[i].flightNumber + '"></td>' +
                    '<td><input type="text" name="seatClass" class="layui-input" placeholder="请输入座位等级" lay-verify="required" value="' + params.flightList[i].seatClass + '"></td>' +
                    '<td><input type="text" name="flightDate" class="layui-input laydate-item-typeinitinerary-flightdate" placeholder="请选择乘机日期" lay-verify="required|date" value="' + params.flightList[i].flightDate + '"></td>' +
                    '<td><input type="text" name="flightTime" class="layui-input laydate-item-typeinitinerary-flighttime" placeholder="请选择乘机时间" lay-verify="required" value="' + params.flightList[i].flightTime + '"></td>' +
                    '<td><input type="text" name="fareBasis" class="layui-input" placeholder="请输入客票级别" value="' + params.flightList[i].fareBasis + '"></td>' +
                    '<td><input type="text" name="freeBaggage" class="layui-input" placeholder="请输入免费行李" value="' + params.flightList[i].freeBaggage + '"></td>' +
                    '<td><button class="layui-btn layui-btn-sm layui-bg-red delete-row-btn"><i class="layui-icon layui-icon-delete"></i> 删除</button></td>' +
                    '</tr>';
                $('#ID-table-myinvoice-typeinitineraryform tbody').append(updateRow);
            }
        }
        else {
            $('#ID-table-myinvoice-typeinitineraryform tbody').append(newRow);
        }

        // 若需用到 layui 组件，layui.use 需写在该全局方法里面，如：
        //layui.use(['table'], function () {
        //    var table = layui.table;
        //    table.render({
        //        elem: '',
        //        url: 'url?id=' + params.id
        //    });
        //});
    };

    layui.use(['admin', 'table', 'form', 'util'], function () {
        var $ = layui.$
            , admin = layui.admin
            , setter = layui.setter
            , view = layui.view
            , table = layui.table
            , laydate = layui.laydate
            , util = layui.util
            , form = layui.form;

        // 日期
        laydate.render({
            elem: '#ID-laydate-typeinitinerary-issuedDate',
            max: 0
        });
        laydate.render({
            elem: '.laydate-item-typeinitinerary-flightdate',
            max: 0
        });
        laydate.render({
            elem: '.laydate-item-typeinitinerary-flighttime',
            type: 'time',
            format: 'HH:mm'
        });

        //处理自定义事件
        util.on({
            clear: function () {
                console.log(this); // 当前触发事件的 DOM 元素

                $(':input[name=lotNo]').val('');
                $(':input[name=uploadTimeStart]').val('');
                $(':input[name=uploadTimeEnd]').val('');
                //form.render($('#ID-select-myinvoice-billtype'));

                //执行重载
                table.reload('LAY-myinvoice-viewresult-manage', {
                    where: {}
                });
            },
            add: function () {
                //添加航班明细
                $('#ID-table-myinvoice-typeinitineraryform tbody').append(newRow);

                //重新渲染日期时间控件
                laydate.render({
                    elem: '.laydate-item-typeinitinerary-flightdate',
                    max: 0
                });
                laydate.render({
                    elem: '.laydate-item-typeinitinerary-flighttime',
                    type: 'time',
                    format: 'HH:mm'
                });
            }
        });

        $(document).on('click', '.delete-row-btn', function () {
            //至少保留一行
            var trCount = $('#ID-table-myinvoice-typeinitineraryform tbody tr').length;
            if (trCount <= 1) {
                return false;
            }
            $(this).closest('tr').remove();
        });

        function calcTotalAmount() {
            // 为前两个文本框添加输入事件监听器
            $(':input[name=fare], :input[name=fuelSurcharge], :input[name=tax], :input[name=civilAviationFund], :input[name=otherTax]').on('input', function () {
                // 获取文本框的值，并转换为数字
                var fare = parseFloat($(':input[name=fare]').val()) || 0;
                var fuelSurcharge = parseFloat($(':input[name=fuelSurcharge]').val()) || 0;
                var tax = parseFloat($(':input[name=tax]').val()) || 0;
                var civilAviationFund = parseFloat($(':input[name=civilAviationFund]').val()) || 0;
                var otherTax = parseFloat($(':input[name=otherTax]').val()) || 0;

                // 计算总和
                var sum = fare + fuelSurcharge + tax + civilAviationFund + otherTax;

                // 将总和赋值给合计金额文本框，并保留两位小数
                $(':input[name=total]').val(sum.toFixed(2));
            });
        }
        calcTotalAmount();

        //点缀事件
        form.on('input-affix(calcAmount)', function (data) {
            // 获取文本框的值，并转换为数字
            var fare = parseFloat($(':input[name=fare]').val()) || 0;
            var fuelSurcharge = parseFloat($(':input[name=fuelSurcharge]').val()) || 0;
            var tax = parseFloat($(':input[name=tax]').val()) || 0;
            var civilAviationFund = parseFloat($(':input[name=civilAviationFund]').val()) || 0;
            var otherTax = parseFloat($(':input[name=otherTax]').val()) || 0;

            // 计算总和
            var sum = fare + fuelSurcharge + tax + civilAviationFund + otherTax;

            // 将总和赋值给合计金额文本框，并保留两位小数
            $(':input[name=total]').val(sum.toFixed(2));
        });

    });
</script>